<template>
  <div class="acct-detail-container">
    <div>
      <button class="back-button" @click="goBack">返回</button>
      <h1>账户详情</h1>
    </div>

    <div v-if="loading" class="loading">加载中...</div>

    <div v-else-if="error" class="error-message">
      <p>{{ error }}</p>
      <button class="retry-button" @click="fetchAcctInfo">重试</button>
    </div>

    <div v-else class="acct-info">
      <!-- 上区域 - 高度300px，分为左中右三个区域 -->
      <div class="top-section">
        <div class="left-area">左侧区域</div>
        <div class="middle-area">中间区域</div>
        <div class="right-area">右侧区域</div>
      </div>

      <!-- 中区域 - 高度500px，分为左右两个区域 -->
      <div class="middle-section">
        <div class="left-half">左半区域</div>
        <div class="right-half">右半区域</div>
      </div>

      <!-- 下区域 - 高度200px，分为四个区域 -->
      <div class="bottom-section">
        <div class="quarter-area">区域1</div>
        <div class="quarter-area">区域2</div>
        <div class="quarter-area">区域3</div>
        <div class="quarter-area">区域4</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const acctId = ref(route.params.acctId)
const acctInfo = ref({})
const loading = ref(true)
const error = ref('')

const goBack = () => {
  router.push('/')
}

const fetchAcctInfo = async () => {
  loading.value = true
  error.value = ''

  try {
    // 模拟API调用获取账户信息
    // 实际项目中应替换为真实API调用
    setTimeout(() => {
      acctInfo.value = {
        acctId: acctId.value,
        acctName: '测试账户',
        // 其他账户信息...
      }
      loading.value = false
    }, 1000)
  } catch (err) {
    console.error('获取账户信息失败:', err)
    error.value = '获取账户信息失败，请稍后再试'
    loading.value = false
  }
}

onMounted(() => {
  fetchAcctInfo()
})
</script>

<style scoped>
.acct-detail-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.back-button {
  background-color: #f0f0f0;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
}

.back-button:hover {
  background-color: #e0e0e0;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
  padding: 40px;
  font-size: 18px;
  color: #666;
}

.error-message {
  text-align: center;
  padding: 20px;
  color: #d9534f;
  background-color: #f9f2f2;
  border-radius: 4px;
  margin-bottom: 2px;
}

.retry-button {
  background-color: #d9534f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1px;
}

.acct-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  height: 100%;
}

/* 上区域样式 */
.top-section {
  display: flex;
  height: 300px;
  margin-bottom: 2px;
  border: 1px solid #ddd;
  border-radius: 0;
  width: 100%;
}

.left-area {
  width: 20%;
  background-color: #f5f5f5;
  padding: 1px;
  border-right: 1px solid #ddd;
}

.middle-area, .right-area {
  width: 40%;
  padding: 1px;
}

.middle-area {
  border-right: 1px solid #ddd;
  background-color: #fafafa;
}

/* 中区域样式 */
.middle-section {
  display: flex;
  height: 500px;
  margin-bottom: 2px;
  border: 1px solid #ddd;
  border-radius: 0;
  width: 100%;
}

.left-half, .right-half {
  flex: 1;
  padding: 1px;
}

.left-half {
  border-right: 1px solid #ddd;
  background-color: #f9f9f9;
}

/* 下区域样式 */
.bottom-section {
  display: flex;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 0;
  width: 100%;
}

.quarter-area {
  flex: 1;
  padding: 1px;
  border-right: 1px solid #ddd;
  background-color: #f8f8f8;
}

.quarter-area:last-child {
  border-right: none;
}
</style>